<template>
  <VueDraggable ref="el">
    <a-modal
      v-model:open="open"
      :width="1152"
      wrap-class-name="full-modal"
      style="top:0;margin-bottom: 0;width: 210mm;height: 280mm;"
      :footer="null"
      :closable="false"
      :mask-closable="false"
    >
<!--      导航栏-->
      <div class="mb-[20px] flex gap-2">
        <a-button type="primary" @click="handleCancel" style="width: 64px">
          <template #icon>
            <img class="size-[20px] bottom-[6px] right-[16px] absolute" src="../../assets/quit.svg" alt="">
          </template>
        </a-button>
        <a-button class="no-print" type="primary" @click="printReport">打印报告</a-button>
        <a-button v-if="editable" class="no-print " type="primary" @click="editable=false">保存</a-button>
        <a-button v-else class="no-print " type="primary" @click="editable=true">编辑</a-button>
      </div>

      <!--    Header-->
      <div class="flex justify-center h-[100px] items-center">
        <span class="text-[36px]">{{ hospitalName }}</span>
        <img class="absolute left-[80px]" src="../../assets/hospitalLogo.svg" alt="">
      </div>
      <!--    content-->
      <div>
        <!--      info-->
        <div class=" h-[100px] py-[6px]">
          <div class="flex justify-between text-[18px]">
            <span>检查号:{{ user.checkSerial }}</span>
            <div>
              <span class="relative right-[10px]">仪器型号：</span>
              <a-input class="h-[28px] w-[100px] mb-[2px]" v-if="editable" v-model:value="machineName"
                       @pressEnter="editable=false"></a-input>
              <span v-else @click="editable=true">{{ machineName }}</span>
            </div>
          </div>
          <div class="h-[2px] bg-black"></div>
          <div class="flex text-[18px]">
            <div class="w-1/4 h-full flex flex-col gap-1">
              <div class="h-1/2 w-full flex">
                <span class="text-justify block">姓名：</span>
                <span>{{ user.checkName }}</span>
              </div>
              <div class="h-1/2 w-full flex">
                <span class=" text-justify block">病历号：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="medicalRecordSerial"
                         @pressEnter="editable=false"></a-input>
                <span v-else @click="editable=true">{{ medicalRecordSerial }}</span>
              </div>
            </div>
            <div class="w-1/4 h-full flex flex-col gap-1">
              <div class="h-1/2 w-full flex gap-[7px]">
                <span class=" text-justify block">性别：{{ user.checkSex }}</span>
                <span>年龄：{{ user.checkAge }}岁</span>
              </div>
              <div class="h-1/2 w-full flex">
                <span class=" text-justify block">住院号：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="department"
                         @pressEnter="editable=false"></a-input>
                <span v-else>{{ hospitalSerial }}</span>
              </div>
            </div>
            <div class="w-1/4 h-full flex flex-col gap-1">
              <div class="h-1/2 w-full flex">
                <span class=" text-justify block">科别：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="department" @pressEnter="editable=false"></a-input>
                <span v-else @click="editable=true">{{ department }}</span>
              </div>
              <div class="h-1/2 w-full flex">
                <span class=" text-justify block" >病区号：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="areaSerial" @pressEnter="editable=true"></a-input>
                <span v-else @click="editable=true" >{{ areaSerial }}</span>
              </div>
            </div>
            <div class="w-1/4 h-full flex flex-col gap-1">
              <div class="h-1/2 w-full flex">
                <span class="text-justify block">申请医师：</span>
                <a-input class="h-[28px] w-[50%]" v-if="editable" v-model:value="applyDoctor" @pressEnter="editable=true"></a-input>
                <span v-else @click="editable=true" >{{ applyDoctor }}</span>
              </div>
              <div class="h-1/2 w-full flex">
                <span class=" text-justify block" >床位号：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="bedSerial" @pressEnter="editable=true"></a-input>
                <span v-else @click="editable=true" >{{ bedSerial }}</span>
              </div>
            </div>
          </div>
          <div class="h-[2px] bg-black relative -bottom-[2px]"></div>
        </div>
        <!--      images-->
        <div class=" h-[300px] relative py-[6px] items-center flex ">
          <span class="absolute top-0 left-0 text-[18px]">检查图像:</span>
          <!--          normal image-->
          <div class="w-auto grid grid-cols-3 gap-1 ml-[24px] mt-[30px]">
            <div v-for="(item,index) in normalImageArray" :key="index">
              <img class="rounded-full size-[110px]"
                   :src="item.image_url" alt="">
              <span class="text-[16px] left-1/3 relative">{{item.part}}</span>
            </div>
          </div>
          <!--          ai image-->
          <div class="flex ml-auto gap-[10px]">
            <div  v-for="(item,index) in aiImageArray" :key="index">
              <img class="rounded-full size-[160px]"
                   :src="item.ai_image_url" alt="">
              <span class="relative left-1/3 -translate-x-1/2 text-[26px]">{{item.part}}</span>
            </div>
          </div>
        </div>
        <!--      diagnosis-->
        <div class=" h-[380px] relative w-full text-[18px]">
          <div class="h-[2px] w-full bg-black absolute top-[4px]"></div>
          <div class="h-3/6 bg-white">
            <span class="relative top-[10px] block mb-4" @click="editable=true">内镜所见：</span>
            <a-textarea v-if="editable" class="" v-model:value="insideCamera" @pressEnter="editable=false">
              {{insideCamera}}
            </a-textarea>
            <span v-else class="ml-9" @click="editable=true">{{insideCamera}}</span>
          </div>
          <div class="h-2/6 ">
            <span class="relative top-[10px] block mb-4" @click="editable=true">镜下诊断：</span>
            <a-textarea v-if="editable" class="" v-model:value="underCamera" @pressEnter="editable=false">
              {{underCamera}}
            </a-textarea>
            <span v-else class="ml-9" @click="editable=true">{{underCamera}}</span>
          </div>
          <div class="h-1/6 flex">
            <div class="flex-col flex flex-1 gap-[4px]">
              <div>
                <span>活检部位：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="checkPosition"
                         @pressEnter="editable=true"></a-input>
                <span v-else @click="editable=true">{{ checkPosition }}</span>
              </div>
              <div>
                <span>医生建议：</span>
                <a-input class="h-[28px] w-[60%]" v-if="editable" v-model:value="doctorSuggestion"
                         @pressEnter="editable=true"></a-input>
                <span v-else @click="editable=true">{{ doctorSuggestion }}</span>
              </div>

            </div>
            <div>
              <span>病理诊断：</span>
              <a-textarea class="h-[28px] w-[60%]" v-if="editable" v-model:value="diseaseDiagnose"
                          @pressEnter="editable=true"></a-textarea>
              <span v-else @click="editable=true">{{ diseaseDiagnose }}</span>
            </div>
          </div>
        </div>
        <!--      footer-->
        <div class=" h-[100px] relative text-[18px]">
          <div class="h-[2px] w-full bg-black absolute top-[1px]"></div>
          <span class="absolute top-[1px] text-[16px]">几象智造(深圳)科技有限公司</span>
          <span class="absolute bottom-[1px] text-[16px] left-[50%] -translate-x-[50%]">仅供临床参考，不作证明材料！</span>
          <div class="w-1/2 relative left-[360px] flex">
            <span class="flex-1">诊断医师：{{ doctor.name }}</span>
            <div class="flex flex-col flex-1">
              <span>审核医生：{{ doctor.name }}</span>
              <span>检查日期：{{ today }}</span>
            </div>
          </div>
        </div>

      </div>
    </a-modal>
  </VueDraggable>
</template>

<script>
import {ref, watch} from "vue";
import dayjs from "dayjs";
import {VueDraggable} from "vue-draggable-plus";
import {useStore} from "vuex";

export default {
  name: "PrintPage",
  props: {
    user: {
      type: Object,
      default: {}
    },
    doctor: {
      type: Object,
      default: {}
    },
    insideCameraText:{
      type: String,
      default:''
    }
  },
  components: {
    VueDraggable
  },
  setup(props) {
    const store = useStore()
    const open = ref(false);
    const confirmLoading = ref(false);
    const handleOk = () => {

    };
    const showModal = () => {
      open.value = true;
    };
    const printReport = () => {
      window.print()
    }

    const handleLoadImage = (result) => {
      aiImageArray.value = result.aiImage
      normalImageArray.value = result.normalImage
    }
    const handleLoadData = (id) => {

    }

    const aiImageArray = ref([])
    const normalImageArray = ref([])
    // 控制是否必须要AI图片
    const aiImage = ref('');

    const editable = ref(false)
    const editUnderCamera = ref(false)
    const insideCamera = ref('')
    const underCamera = ref('')
    const department = ref('')
    const areaSerial = ref('')
    const applyDoctor = ref('')
    const bedSerial = ref('')
    const hospitalName = ref()
    watch(() => store.state.HospitalInfo.hospitalName, (value) => {
      console.log('hospitalName', value)
      hospitalName.value = value
    })
    const machineName = ref('')
    const medicalRecordSerial = ref('')
    const today = ref(dayjs().format('YYYY-MM-DD'))
    const checkPosition = ref('')
    const doctorSuggestion = ref('')
    const diseaseDiagnose = ref('')
    const hospitalSerial = ref('')


    const handleCancel = () => {
      open.value = false;
    };

    watch(()=>props.insideCameraText,(value)=>{
      insideCamera.value = value
    })

    return {
      open,
      confirmLoading,
      aiImageArray,
      normalImageArray,
      aiImage,
      editable,
      editUnderCamera,
      insideCamera,
      underCamera,
      department,
      areaSerial,
      applyDoctor,
      bedSerial,
      hospitalName,
      machineName,
      medicalRecordSerial,
      today,
      checkPosition,
      doctorSuggestion,
      diseaseDiagnose,
      hospitalSerial,
      store,
      handleOk,
      showModal,
      printReport,
      handleLoadImage,
      handleLoadData,
      handleCancel,
    }
  }
}
</script>

<style scoped>
@media print {
  .no-print {
    display: none;
  }

  @page {
    margin: 0;
  }
}
@page  {
  size: A4;
}

</style>
